<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<title>OS3 Grid Example 8 - Column Renderers</title>
	<link type="text/css" rel="stylesheet" href="css/examples.css" />
	<link type="text/css" rel="stylesheet" href="../os3grid.css" />
	<script src="../../../os3jslib/liwe.js" type="text/javascript"></script>
	<script src="../../../os3jslib/validators.js" type="text/javascript"></script>
	<script src="../os3grid.js" type="text/javascript"></script>
</head>
<body>
<div id="block_top">
	<h2 class="center">OS3Grid Example 8 - Column Renderers</h2>
	<h4 class="center">By Fabio Rotondo - fsoft (@) sourceforge ( dot ) net</h4>
</div>

<div id="block_left">
	<div class="menu_title">Examples</div>

	<div>
		<a href="index.html">Main Page</a><br />
		<a href="ex1.html">Simple Grid</a><br />
		<a href="ex2.html">Sortable Grid</a><br />
		<a href="ex3.html">Selectable Cells Grid</a><br />
		<a href="ex4.html">Editable Grid</a><br />
		<a href="ex5.html">Custom Callbacks</a><br />
		<a href="ex6.html">Rows Selection</a><br />
		<a href="ex7.html">Column Resize</a><br />
		<a href="ex8.html">Column Renderers</a><br />
		<a href="ex9.html">Delete row</a><br />
	</div>

	<div class="menu_title">Advanced Examples</div>
	<div>
		<a href="adv_styles.html">Setting and Using Styles</a><br />
		<a href="adv_edit.html">Using OS3Grid to edit a dataset</a><br />
		<a href="adv_cell_manip.html">Advanced Cell Value Manipulation</a><br />
	</div>

	<div class="menu_title">Support OS3Grid</div>
	<a href="http://sourceforge.net/donate/index.php?group_id=132180" target="_blank"><img src="http://images.sourceforge.net/images/project-support.jpg" width="88" height="32" border="0" alt="Support OS3Grid" /> </a>
</div>

<div id="block_middle">
	<div>
		Version 0.5 adds another interesting feature: <b>Column Renderers</b>. <br />
		A column renderer allows you to define a custom visualization function to each column.
		In the next example, you'll see how to:
		<ul>
			<li>Bold text inside a cell</li>
			<li>Create a link based upon data contained in a cell</li>
		</ul>
		To add a column renderer, you have to define it with the <tt>set_col_renderer()</tt>
		method before rendering the OS3Grid.<br />

		First of all, we'll bold user nick name, creating this renderer:

		<div class="code"><pre>
			function bold_render ( txt ) 
			{
				return '&lt;strong&gt;' + txt + '&lt;\/strong&gt;'; 
			} 

			g.set_col_renderer ( 1, bold_render );
		</pre></div>

		Then, we have to create the render that will show up a link in the id column, this way:

		<div class="code"><pre>
			// Create link rendered
			function link_render ( id )
			{	
				return '&lt;a href="#' + id + "&gt;' + id + '&lt;/a&gt;';
			}

			g.set_col_renderer ( 0, link_render );
		</pre></div>

		That's all! The final result is shown below.

		<div class="result">

			<div id="grid"></div>
			<script type="text/javascript">
				function bold_render ( txt )
				{
					return '<span style="color: red; font-weight: bold">' + txt + '<\/span>';
				}

				function link_render ( id )
				{
					return '<a href="#">' + id + '<\/a>';
				}
				// Create an OS3Grid instance
				var g = new OS3Grid ();
				var t;

				// Grid Headers are the grid column names
				g.set_headers ( 'id', 'nick', 'Name', 'Surname', 'Age' );

				// Now, we add some rows to the grid
				g.add_row ( 1, 'fsoft', 'Fabio', 'Rotondo', 33 );
				g.add_row ( 2, 'john', 'John', 'Bustone', 31 );
				g.add_row ( 3, 'mkey', 'Mark', 'Key', 28 );
				g.add_row ( 4, 'jdoe', 'John', 'Doe', 35 );

				for ( t = 5; t < 100; t ++ )
					g.add_row ( t, 'name' + t, 'User' + t, 'Last' + t, t );

				// Enable sortable rows
				g.sortable = true;

				g.set_col_type ( 0, "int" );
				g.set_col_type ( 4, "int" );

				g.set_col_render ( 0, link_render );
				g.set_col_render ( 1, bold_render );

				// Enable highlight of rows with the mouse
				g.highlight = true;

				// Enable column resize
				g.resize_cols = true;

				g.show_row_num = true;

				// Show the grid replacing the original HTML object with the "grid" ID.
				g.render ( 'grid' );
			</script>
		</div>
	</div>
	<div id="debug">

	</div>
</div>

</body>
</html>

